<template>
	<view class="addVideo_box">
		<!-- 回到首页 -->
		<view class="close">
			<image src="https://yy.dx1126.cn/images/close.png" mode="" @click="toIndex"></image>
		</view>
		<!-- 视频 -->
		<view class="videoPlay">
			<!--
			device-position	String	back	前置或后置摄像头，值为front, back
			@stop	EventHandle		摄像头在非正常终止时触发，如退出后台等情况
			 -->
			<!-- 展示的视频 -->
			<camera class="camera" :device-position="reverse" @stop="stopVideo" @error="error"></camera>
			<view class="camera_play">
				<view class="medio" @click="setReverse">
					<image src="https://yy.dx1126.cn/images/reverse.png" mode=""></image>
					<text>翻转</text>
				</view>
				<view class="luZhi" @click="setplay">
					<text class="luZhi_button" :style="{opacity:playBob?1:0}"></text>
					<image class="luZhi_pause" :style="{opacity:playBob?0:1}" src="https://yy.dx1126.cn/images/stop.png"
						mode="">
					</image>
				</view>
				<view class="xiangChe" @click="toSetVideo">
					<image src="https://yy.dx1126.cn/images/xiang.png" mode=""></image>
					<text>相册</text>
				</view>
			</view>
			<!-- <button type="primary" @click="takePhoto">拍照</button> -->
			<!-- <view>预览</view> -->
			<!-- <image mode="widthFix" :src="src"></image> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import debounce from "../../utils/debounce.js"
	import {
		onReady
	} from '@dcloudio/uni-app'

	// 选择视频前往视频编辑页面
	const toSetVideo = () => {
		uni.chooseMedia({
			count: 1,
			mediaType: ['video'],
			sourceType: ['album'],
			success(res) {
				uni.navigateTo({
					url: '/pages/setVideo/setVideo?src=' + res.tempFiles[0].tempFilePath
				})
			}
		})

	}

	// 视频地址
	let that = getCurrentInstance()
	// 创建视频录制的上下文对象
	let context = ref(uni.createCameraContext())
	// 切换录制
	let playBob = ref(true)
	// 用户不允许使用摄像头时触发
	const error = () => {
		// 获取摄像头权限
		uni.authorize({
			scope: 'scope.camera',
			success: () => {
				uni.showToast({
					title: '获取成功',
					icon: 'error',
					duration: 2000
				});
			},
			fail: () => {
				uni.showToast({
					title: '未获取权限，无法拍摄',
					icon: 'error',
					duration: 2000
				});
			}
		})
	}

	const setplay = debounce(() => {
		if (playBob.value) {
			// 获取摄像头权限
			uni.authorize({
				scope: 'scope.camera',
				success: () => {
					// 开始录制
					context.value.startRecord({
						timeout: 180,
						success: () => {
							uni.showToast({
								title: '开始录制',
								duration: 2000
							});
							playBob.value = false
						},
						fail: () => {
							uni.showToast({
								title: '录制错误,请重新拍摄',
								icon: 'error',
								duration: 2000
							});
						}
					})
				},
				fail: () => {
					uni.showToast({
						title: '没有摄像头权限无法拍摄',
						icon: 'error',
						duration: 2000
					});
				}
			})
		} else {
			// 停止录制，并保存视频到相册
			context.value.stopRecord({
				success: (res) => {
					uni.showToast({
						title: '停止录制',
						icon: 'error',
						duration: 2000
					});
					playBob.value = true
					// 获取存入相册的权限
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							// 将视频存入相册
							uni.saveVideoToPhotosAlbum({
								// 文件路径
								filePath: res.tempVideoPath,
								success: function() {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									});
									uni.navigateTo({
										url: '/pages/setVideo/setVideo?src=' +
											res.tempVideoPath
									})
								},
								fail: (e) => {
									uni.showToast({
										title: '保存失败',
										icon: 'error',
										duration: 2000
									});
								}
							});
						},
						fail: () => {
							uni.showToast({
								title: '没有权限,保存失败',
								icon: 'error',
								duration: 2000
							});
						}
					})
				}
			})
		}
	}, 300)

	// 退出后台自动保存
	const stopVideo = () => {
		// 停止录制，并保存视频到相册
		context.value.stopRecord({
			success: (res) => {
				uni.showToast({
					title: '停止录制',
					icon: 'error',
					duration: 2000
				});
				// 获取存入相册的权限
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						// 将视频存入相册
						uni.saveVideoToPhotosAlbum({
							// 文件路径
							filePath: res.tempVideoPath,
							success: function() {
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							},
							fail: (e) => {
								uni.showToast({
									title: '保存失败',
									icon: 'error',
									duration: 2000
								});
							}
						});
					}
				})
			}
		})
	}

	// 返回首页
	const toIndex = () => {
		uni.redirectTo({
			url: "/pages/index/index"
		})
	}

	// 相机翻转
	let reverse = ref('back')
	const setReverse = () => {
		if (reverse.value == 'back') {
			reverse.value = 'front'
		} else {
			reverse.value = 'back'
		}
	}
</script>

<style lang="less">
	page {
		background-color: black;
	}

	.addVideo_box {
		width: 750rpx;
		height: 100%;

		// 返回首页和相机翻转
		.close {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			position: fixed;
			top: 50rpx;
			z-index: 30;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		// 视频拍摄
		.videoPlay {
			width: 100%;
			height: 100%;
			position: relative;


			// 相机
			.camera {
				width: 100%;
				height: 100%;
			}

			// 临时展示
			.linShiZhan {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 500rpx;
				height: 400rpx;
				z-index: 100;
			}

			.camera_play {
				width: 100%;
				height: 120rpx;
				position: absolute;
				bottom: 50rpx;
				// background-color: white;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				color: white;

				view {
					height: 100%;
					width: 80rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					image {
						width: 60rpx;
						height: 60rpx;
					}

					text {
						font-size: 28rpx;
					}
				}

				// 录制按钮
				.luZhi {
					width: 150rpx;
					height: 150rpx;
					padding: 7rpx;
					border: 7rpx solid white;
					border-radius: 50%;
					position: relative;
					top: -20rpx;

					.luZhi_button {
						width: 100%;
						height: 100%;
						border-radius: 50%;
						// background-color: aqua;
						background-image: linear-gradient(to top right, #fc3960, #fd7638);
						transition: all 0.4s ease-in-out;
					}

					.luZhi_pause {
						width: 50%;
						height: 50%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
						transition: all 0.4s ease-in-out;
					}
				}
			}
		}
	}
</style>